<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;

    }
    body{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.75);
    }
    .container{
      width: 90%;
      height: 90%;
      position: relative;
      overflow: hidden;
    }
    .image{
      width: 100%;
      height: 100%;
      background-image: url('../images/7.jpg');
      background-repeat: no-repeat;
      /* 保持比例裁切长边 */
      background-size: cover;
      background-position: center;
      /* 固定背景图像 */
      background-attachment: fixed;
      filter: blur(6px);
      overflow: hidden;
    }
    /* 加上半透明白色蒙版 */
    .image::before{
      content: "";
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.2);
      position: absolute;
    }
    /* 高清圆 */
    .cursor{
      width: 250px;
      height: 250px;
      border-radius: 50%;
      border: 8px solid rgba(255, 255, 255, 0.25);
      position: absolute;
      background-image: url('../images/7.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image"></div>
    <div class="cursor"></div>
  </div>
  <script>
    const container=document.querySelector('.container')
    const cursor=document.querySelector('.cursor')

    container.addEventListener('mousemove',function(e){

      /**
      * @getBoundingClientRect：表示了当前盒子在浏览器中的位置
      * @获取container、cursor的大小及其相对视口的位置
      * */
      let contRect=container.getBoundingClientRect()
      let cursRect=cursor.getBoundingClientRect()
      
      /**
       * @e.clientX:鼠标的水平坐标
       * @e.clientY:鼠标的垂直坐标
       * @contRect.left:盒子左边边框到屏幕左侧的距离（宽高固定就是固定值）
       * @contRect.top：盒子顶部到屏幕顶部的距离（宽高固定就是固定值）
       * */
      let cursX=e.clientX-cursRect.width/2-contRect.left
      let cursY=e.clientY-cursRect.height/2-contRect.top
      //相对container而言
      cursor.style.left=`${cursX}px`
      cursor.style.top=`${cursY}px`


    })
  </script>
</body>
</html>